﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="../Resource/JS/jquery-1.10.2.js"></script>
</head>
<body>
    <div id="divContainer1" style="float: left;">
        <h1 style="color: red">Web Worker1 Load Data</h1>
        <table id="tab1"></table>
    </div>
    <div id="divContainer2" style="float: left; margin-left: 100px">
        <h1 style="color: red">Ajax Load Data</h1>
        <table id="tab2"></table>
    </div>

    <div id="divContainer3" style="float: left; margin-left: 100px">
        <h1 style="color: red">Web Worker2 Load Data</h1>
        <table id="tab3"></table>
    </div>
    <div style="clear:both"></div>
    <div id="d1" style="width:200px;height:200px;"></div>
    <iframe src="Include.html" height="300" width="300"></iframe>
</body>
</html>
<script>
    //http://blog.jobbole.com/30445/
    //1.可以加载一个JS进行大量的复杂计算而不挂起主进程，并通过postMessage，onmessage进行通信
    //2.可以在worker中通过importScripts(url)加载另外的脚本文件
    //3.可以使用 setTimeout(), clearTimeout(), setInterval(), clearInterval() ,localStorage
    //4.可以使用XMLHttpRequest来发送请求
    //5.可以访问navigator的部分属性
    //有那些局限性：
    //1.不能跨域加载JS
    //2.worker内代码不能访问DOM
    //3.各个浏览器对Worker的实现不大一致，例如FF里允许worker中创建新的worker,而Chrome中就不行
    //4.不是每个浏览器都支持这个新特性

    //尽管创建多个worker来协调任务分配也许很常见，
    //但官方规范指出worker属于相对重量级并能长期运行在后台的脚本。
    //所以，由于Web worker的高启动性能成本和高进程内存成本，它们的数量不宜过多。

    //var requestJson = { url: "Server.aspx", data: { tag: "getDataByWorker", ran: Math.random }, container: $("#tab1") };
    var requestJson1 = "url:Server.aspx?tag=getDataByWorker1,  tag: getDataByWorker, ran: Math.random()";
    var requestJson3 = "url:Server.aspx?tag=getDataByWorker3,  tag: getDataByWorker, ran: Math.random()";

    function work(argu, container) {
        var worker = new Worker("work.js");
        worker.postMessage(argu);
        worker.onmessage = function (evt) {
            render(evt.data, container);
            worker.terminate();
        }
        worker.onerror = function (error) {
            console.log(error.filename + "--" + error.message + "--" + error.lineno);
        }
    }
    work(requestJson1, $('#tab1'));
    work(requestJson3, $('#tab3'));

    $.ajax({
        url: "Server.aspx?tag=getDataByAjax",
        data: null,
        dataType: "text",
        success: function (d) {
            render(eval("(" + d + ")"), $('#tab2'));
        }
    })

    function render(d, container) {
        var html = "";
        for (var i = 0; i < d.length; i++) {
            html += "<tr>";
            html += "<td>" + d[i].id + "</td>";
            html += "<td>" + d[i].name + "</td>";
            html += "<td>" + d[i].address + "</td>";
            html += "<td>" + d[i].birthday + "</td>";
            html += "</tr>";
        }
        $(container).append($(html));
    }
    var worker = new SharedWorker('shareWork.js');
    worker.port.addEventListener('message', function (e) {
        $("#d1").html(e.data);
    }, false);
    worker.port.start();
    worker.port.postMessage('url:port1.aspx');
</script>
